<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="utf-8">
    <!-- 浏览器的预览设置 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--    样式-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <!--    自定义样式-->
    <link rel="stylesheet" href="../../static/css/me.css" >
    <!--    自动排版-->
    <link rel="stylesheet" href="../../static/css/typo.css">
    <!--    代码高亮-->
    <link rel="stylesheet" href="../../static/lib/prism/prism.css">
    <!--    自动生成目录-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
    <!--    css动画-->
    <link href="https://unpkg.com/animate.css@3.5.2/animate.min.css">

    <!--    js-->
    <!--    /*/<th:block th:replace="_fragments :: script">/*/-->
    <!--    自动生成目录-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
    <!--    jquery-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <!--    semantic-->
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <!--    代码高亮-->
    <script src="../../static/lib/prism/prism.js"></script>
    <!--   平滑效果-->
    <script src="../../static/lib/waypoints/jquery.waypoints.js"></script>
    <script src="../../static/lib/waypoints/jquery.waypoints.min.js"></script>
    <!--    平滑滚动-->
    <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
    <title>400</title>
    <!--   /*/</th:block>/*/-->
</head>
<body>
<!--导航栏-->
<!-- 分隔-->
<nav class="ui inverted vertical segment m-padded-tb-mini">
    <!--    容器-->
    <div class="ui container">
        <!--菜单（无分割线），stackable响应移动端,可堆叠-->
        <div class="ui inverted secondary stackable menu">
            <!--            标题元素-->
            <h2 class="ui blue header item">Blog</h2>
            <!--            元素-->
            <a href="#" class="m-item item m-mobile-hide" ><i class="home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
            <div class="right m-item item m-mobile-hide">
                <!--                输入框透明化-->
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="请输入。。。">
                    <i class="search icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show ">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--中间内容-->

<div class="m-container-small m-padded-tb-massive">
    <div class="ui error message m-padded-tb-massive">
        <div class="container">
            <h2><b>400</b></h2>
            <p>客户端请求的语法错误，服务器无法理解</p>
        </div>
    </div>
</div>

<!--底部footer-->
<!--分割线-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
    <!--    容器-->
    <div class="ui left aligned container">
        <!--        有分割线的分组-->
        <div class="ui inverted divided grid stackable ">
            <div class="eight wide column">
                <!--                标题-->
                <h4 class="ui inverted header">联系我</h4>
                <!--                列表-->
                <div class="ui link list">
                    <p class="m-text-thin m-text-spaced m-opacity-mi">@邮箱：605908340@qq.com</p>
                    <p class="m-text-thin m-text-spaced m-opacity-mi">@联系电话：15659132375</p>
                </div>
            </div>
            <div class="four wide column">
                <h4>作者寄语</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mi">大家一起努力开始编程</p>
            </div>
            <div class="four wide column">
                <h4>对读者的祝福</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mi">祝福大家第一年就月薪过万</p>
            </div>
        </div>
    </div>
</footer>

<!--点击事件-->
<script>
    // 获取.menu.toggle点击时
    $('.menu.toggle').click(function (){
        $('.m-item').toggleClass('m-mobile-hide');

    });
</script>
</body>
</html>